<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">主页</span></el-breadcrumb-item>
      <el-breadcrumb-item>羊群信息</el-breadcrumb-item>
      <el-breadcrumb-item><span>基本信息</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <!-- 新增页 -->
      <el-dialog title="羊只基本信息表" v-dialogDrag :visible.sync="dialogVisible[1].addPage" width="65.625rem"
        :before-close="handleClose">
        <el-form :inline="true" :model="inputValue">
          <el-form-item label="羊只编号" label-width="100px">
            <el-input type="number" v-model="inputValue.sheepId"></el-input>
          </el-form-item>
          <el-form-item label="用户编号" label-width="100px">
            <el-input type="number" v-model="inputValue.userId"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" label-width="100px">
            <el-date-picker style="width: 187px;" v-model="inputValue.birthDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="性别" label-width="100px">
            <el-radio @click.native="emptyAddValue('公羊','sex',$event)" v-model="inputValue.sex" label="公羊">公羊</el-radio>
            <el-radio @click.native="emptyAddValue('母羊','sex',$event)" v-model="inputValue.sex" label="母羊">母羊</el-radio>
          </el-form-item>
          <el-form-item label="等级" label-width="153px">
            <el-radio-group v-model="inputValue.level" class="elRadio_AE">
              <el-radio-button @click.native="emptyAddValue('特级','level',$event)" label="特级"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('一级','level',$event)" label="一级"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('二级','level',$event)" label="二级"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('等级外','level',$event)" label="等级外"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="品种" label-width="98px">
            <el-radio @click.native="emptyAddValue('敏盖绒山羊','variety',$event)" v-model="inputValue.variety"
              label="敏盖绒山羊">敏盖绒山羊</el-radio>
            <el-radio @click.native="emptyAddValue('内蒙古白绒山羊','variety',$event)" v-model="inputValue.variety"
              label="内蒙古白绒山羊">内蒙古白绒山羊</el-radio>
          </el-form-item>

        </el-form>

        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="初生重" label-width="100px">
            <el-input type="number" v-model="inputValue.bWeight"></el-input>
          </el-form-item>
          <el-form-item label="断奶重" label-width="100px">
            <el-input type="number" v-model="inputValue.wWeight"></el-input>
          </el-form-item>
          <el-form-item label="园区" label-width="100px">
            <el-radio-group id="elRadio" v-model="inputValue.ground">
              <el-radio-button @click.native="emptyAddValue('1','ground',$event)" label="1"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('3','ground',$event)" label="3"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('2','ground',$event)" label="2"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('4','ground',$event)" label="4"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('5','ground',$event)" label="5"></el-radio-button>
              <el-radio-button @click.native="emptyAddValue('6','ground',$event)" label="6"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="父号" label-width="100px">
            <el-input type="number" v-model="inputValue.fu"></el-input>
          </el-form-item>
          <el-form-item label="母号" label-width="100px">
            <el-input type="number" v-model="inputValue.mu"></el-input>
          </el-form-item>
          <el-form-item label="祖父" label-width="100px">
            <el-input type="number" v-model="inputValue.zuFu"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="祖母" label-width="100px">
            <el-input type="number" v-model="inputValue.zuMu"></el-input>
          </el-form-item>
          <el-form-item label="外祖父" label-width="100px">
            <el-input type="number" v-model="inputValue.waiZuFu"></el-input>
          </el-form-item>
          <el-form-item label="外祖母" label-width="100px">
            <el-input type="number" v-model="inputValue.waiZuMu"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="备注1" label-width="100px">
            <el-input type="text" v-model="inputValue.remake1"></el-input>
          </el-form-item>
          <el-form-item label="备注2" label-width="100px">
            <el-input type="text" v-model="inputValue.remake2"></el-input>
          </el-form-item>
          <el-form-item label="备注3" label-width="100px">
            <el-input type="text" v-model="inputValue.remake3"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="备注4" label-width="100px">
            <el-input type="text" v-model="inputValue.remake4"></el-input>
          </el-form-item>
          <el-form-item label="备注5" label-width="100px">
            <el-input type="text" v-model="inputValue.remake5"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible[1].addPage = false">取 消</el-button>
          <el-button type="success" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看与编辑页 -->
      <el-dialog title="羊只基本信息表" v-dialogDrag :visible.sync="dialogVisible[2].checkPage" width="1000px"
        :before-close="handleClose">
        <el-form :inline="true" :model="row">
          <el-form-item label="羊只编号" label-width="100px">
            <el-input type="number" v-model="row.个体号"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="130px">
            <el-radio v-model="row.性别" label="公羊">公羊</el-radio>
            <el-radio v-model="row.性别" label="母羊">母羊</el-radio>
          </el-form-item>
          <el-form-item label="出生日期" label-width="150px">
            <el-date-picker style="width: 187px;" v-model="row.出生日期" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="row" class="demo-form-inline" ref="form">
          <el-form-item label="品种" label-width="100px">
            <el-input type="text" v-model="row.品种"></el-input>
          </el-form-item>
          <el-form-item label="等级" label-width="130px">
            <el-radio v-model="row.级别" label="1">1</el-radio>
            <el-radio v-model="row.级别" label="2">2</el-radio>
          </el-form-item>
          <el-form-item label="初生重" label-width="189px">
            <el-input type="number" v-model="row.出生体重"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="row" class="demo-form-inline" ref="form">
          <el-form-item label="断奶重" label-width="100px">
            <el-input type="number" v-model="row.断奶体重"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button id="checkPageButton" type="danger" @click="update">修 改</el-button>
          <el-button type="success" @click="dialogVisible[2].checkPage = false">关 闭</el-button>
        </span>
      </el-dialog>
      <div id="headerArea">
        <h2 style="margin:10px 0 10px 10px; display: inline-block;">羊只基本信息表</h2>
        <el-button type="success" size="mini" style="margin-right: 15px;" @click="exportExcel">导出
        </el-button>
      </div>
      <template>
        <el-button @click="dialogVisible[1].addPage = true" round type="success" slot="append" icon="el-icon-edit"
          style="margin: 10px 10px 10px 20px;">新增</el-button>
        <el-form style="display: inline-block;">
          <el-form-item id="searchNum" prop="searchData">
            <el-input placeholder="请输入羊只编号" v-model="searchData.sheepId" clearable
              style="width: 250px; margin-left: 80px;" type="number" @keyup.enter.native="getInfoById"></el-input>
          </el-form-item>
        </el-form>
        <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 10px;"
          @click="getInfoById">搜索</el-button>
      </template>
      <!-- 表格区 -->
      <el-table max-height="550" :data="tableData" :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}" border @row-click="getDetails">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column width="30px"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
        <el-table-column type="expand">
          <div slot-scope="props" style="margin-left: 20px;">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="个体号:">
                <span>{{ props.row.个体号 }}</span>
              </el-form-item>
              <el-form-item label="品种:">
                <span>{{ props.row.品种 }}</span>
              </el-form-item>
              <el-form-item label="户主:">
                <span>{{ props.row.户主 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="身份证号:">
                <span>{{ props.row.身份证号 }}</span>
              </el-form-item>
              <el-form-item label="性别:">
                <span>{{ props.row.性别 }}</span>
              </el-form-item>
              <el-form-item label="出生日期:">
                <span>{{ props.row.出生日期 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="级别:">
                <span>{{ props.row.级别 }}</span>
              </el-form-item>
              <el-form-item label="年龄:">
                <span>{{ props.row.年龄 }}</span>
              </el-form-item>
              <el-form-item label="出生体重:">
                <span>{{ props.row.出生体重 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="断奶体重:">
                <span>{{ props.row.断奶体重 }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-table-column>
        <el-table-column width="100px" sortable prop="个体号" label="个体号" align="center"></el-table-column>
        <el-table-column min-width="100px" sortable prop="品种" label="品种" align="center"></el-table-column>
        <el-table-column sortable prop="户主" label="户主" align="center"></el-table-column>
        <el-table-column width="180px" sortable prop="身份证号" label="身份证号" align="center"></el-table-column>
        <el-table-column sortable prop="性别" label="性别" align="center"></el-table-column>
        <el-table-column width="200px" sortable prop="出生日期" label="出生日期" align="center"></el-table-column>
        <el-table-column sortable prop="级别" label="级别" align="center"></el-table-column>
        <el-table-column sortable prop="年龄" label="年龄" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="出生体重" label="出生体重" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="断奶体重" label="断奶体重" align="center"></el-table-column>
        <el-table-column sortable prop="死亡" label="死亡" align="center"></el-table-column>
        <el-table-column width="200px" sortable prop="死亡日期" label="死亡日期" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="订单编号" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="Operate" label="操作" align="center" fixed="right" width="140">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="查看编辑" placement="top-start" :enterable="false">
                <el-button @click="dialogVisible[2].checkPage = true" type="success" icon="el-icon-edit"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="标记死亡" placement="top-end" :enterable="false">
                <el-button type="success" icon="el-icon-delete" @click="markDeath(scope.row)"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchData: {
          sheepId: "",
        },
        tableData: [],
        dialogVisible: [
          { searchPage: false },
          { addPage: false },
          { checkPage: false },
        ],
        row: {},
        inputValue: {
          sheepId: "", //羊只编号
          userId: "", //用户编号
          birthDate: "", //出生日期
          sex: "", //性别
          level: "", //等级
          variety: "", //品种
          bWeight: "", //初生重
          wWeight: "", //断奶重
          ground: "", //园区
          fu: "", //父号
          mu: "", //母号
          zuFu: "", //祖父
          zuMu: "", //祖母
          waiZuFu: "", //外祖父
          waiZuMu: "", //外祖母
          soldId: "", //订单号  无售出即为null
          die: "", //死亡    死亡填死否
          dieDate: "", //死亡日期  无死亡即为null
          remake1: "", //备注1  无即为null
          remake2: "", //备注2  无即为null
          remake3: "", //备注3  无即为null
          remake4: "", //备注4  无即为null
          remake5: "", //备注5  无即为null
        },
        //分页相关数据
        queryInfo: {
          query: null,
          pagenum: 1, // 当前页码
          pagesize: 10, // 当前每页显示的数据数
          total: 0,
          pageStatus: false, //标识页码是否发生了变化
        },
      };
    },
    activated() {
      // if (this.$store.state.sheepName && this.$store.state.sheepNum) {
      //   this.searchData.sheepId = this.$store.state.sheepNum;
      //   this.getInfoById();
      //   this.$store.commit("emptyValue"); //重置vuex里存储的羊只编号
      // }
    },
    methods: {
      emptyAddValue(num, value, e) {
        if (!e.target._value) return
        if (num == this.inputValue[value]) {
          this.inputValue[value] = ""
        }
      },
      //以羊只编号搜索
      async getInfoById() {
        let { data } = await this.$axios({
          method: "post",
          url: "/familyWord/baseInfo/find",
          data: {
            sheepId: this.searchData.sheepId,
            page: this.queryInfo.pagenum,
          },
        });
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 2500,
          });
        } else {
          //获取失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 2500,
          });
        }
        //渲染数据到页面
        this.queryInfo.total = data.data.countAll;
        this.tableData = data.data.result;
      },
      //新增
      async add() {
        // console.log(this.$moment(this.testValue).format("YYYY-MM-DD"));
        this.inputValue.birthDate = this.$moment(this.inputValue.birthDate).format("YYYY-MM-DD");
        // console.log(this.$moment(this.testValue1).format("YYYY-MM-DD HH:mm:ss"));
        console.log(this.inputValue);
        console.log("添加开始");
        let { data } = await this.$axios({
          method: "post",
          url: "/familyWord/baseInfo/add",
          data: {
            sheepId: this.inputValue.sheepId,
            userId: this.inputValue.userId,
            birthDate: this.inputValue.birthDate,
            sex: this.inputValue.sex,
            level: this.inputValue.level,
            variety: this.inputValue.variety,
            bWeight: this.inputValue.bWeight,
            wWeight: this.inputValue.wWeight,
            ground: this.inputValue.ground,
            fu: this.inputValue.fu,
            mu: this.inputValue.mu,
            zuFu: this.inputValue.zuFu,
            zuMu: this.inputValue.zuMu,
            waiZuFu: this.inputValue.waiZuFu,
            waiZuMu: this.inputValue.waiZuMusheepId,
            soldId: this.inputValue.soldId,
            die: this.inputValue.die,
            remake1: this.inputValue.remake1,
            remake2: this.inputValue.remake2,
            remake3: this.inputValue.remake3,
            remake4: this.inputValue.remake4,
            remake5: this.inputValue.remake5,
          },
        });
        console.log(data);
        console.log("添加中");
        //如果添加成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //添加失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        this.dialogVisible[1].addPage = false;
      },
      // 标记死亡当前行羊只
      async markDeath(row) {
        console.log(row.订单编号, row.个体号, row.死亡, this.$moment().format("YYYY-MM-DD"));
        const confirmResult = await this.$messagebox
          .confirm("此操作将标记该羊只为死亡, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
          })
          .catch((err) => err);
        if (confirmResult != "confirm") {
          return this.$message.info("已取消标记");
        }
        let { data } = await this.$axios({
          method: "post",
          url: "/familyWord/baseInfo/isDie",
          data: {
            soldId: row.订单编号,
            sheepId: row.个体号,
            die: row.死亡,
            dieDate: this.$moment().format("YYYY-MM-DD"),
          },
        });
        //如果标记成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //标记失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        this.getInfoById();
      },
      //编辑更新
      async update() {
        console.log(this.row);
        this.row.出生日期 = this.$moment(this.row.出生日期).format("YYYY-MM-DD");
        console.log("更新开始");
        let { data } = await this.$axios({
          method: "post",
          url: "/familyWord/baseInfo/update",
          data: {
            sheepId: this.row.个体号,
            sex: this.row.性别,
            level: this.row.级别,
            variety: this.row.品种,
            birthDate: this.row.出生日期,
            bWeight: this.row.出生体重,
            wWeight: this.row.断奶体重,
          },
        });
        console.log("更新结束");
        console.log(data);
        //如果更新成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //更新失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        this.dialogVisible[2].checkPage = false;
        this.getInfoById();
      },
      //改变已死亡或已售出的羊只表格颜色
      tableRowClassName({ row, rowIndex }) {
        if (row.死亡 == "是") {
          return "die-row";
        } else if (row.订单编号) {
          return "sell-row";
        }
        return "";
      },
      //获取点击行数据并赋值给row
      getDetails(row) {
        this.row = JSON.parse(JSON.stringify(row)); // 调用JSON方法防止内存冲突
      },
      //通用弹出框函数
      handleClose(done) {
        this.$messagebox
          .confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => { });
      },

      // 改变页码值
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
      },

      //导出Excel表格
      exportExcel() {
        let data = this.tableData;
        //1. 新建一个工作簿
        let workbook = this.$XLSX.utils.book_new();
        //2. 把json对象转成工作表
        let sheet = this.$XLSX.utils.json_to_sheet(data);
        //3.在工作簿中添加工作表
        this.$XLSX.utils.book_append_sheet(workbook, sheet, "羊只基本信息表"); //工作簿名称
        //4.输出工作表,由文件名决定的输出格式
        this.$XLSX.writeFile(workbook, "羊只基本信息表(导出日期：" + this.$moment().format("YYYY年MM月DD日 HH时mm分ss秒 dddd") + ").xlsx"
        ); // 保存的文件名
      },
    },
  };
</script>
<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  #checkPageButton {
    margin-right: 40px;
    width: 100px;
    height: 42px;
  }

  #checkPageButton+button {
    width: 100px;
    height: 42px;
  }

  .demo-table-expand {
    font-size: 10px;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 15%;
  }

  #searchNum>>>.el-input__inner {
    border: 2px solid rgb(75, 152, 207);
    border-radius: 10px;
    color: #000;
  }

  #headerArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #elRadio>>>.el-radio-button__inner {
    padding: 12px .6813rem;
  }

  .elRadio_AE>>>.el-radio-button__inner {
    padding: 12px 7px;
  }
</style>